<template>
  <section class="basebox">
    <div class="flex justify-between">
      <section data-v-21db9f26="" class="left">
        <div class="kkx">
          <img
            src="https://images.webapi.gc.wstservices.co.uk/fit-in/250x250/77b40e90-9b72-11ee-b325-2f54be7c63b2.png"
          />
        </div>
        <div></div>
      </section>
      <div class="saiguo">
        <p :class="winObj.Wins > winObj.VsWins ? 'Wins' : ''">
          {{ winObj.Wins }}
        </p>
        <p>-</p>
        <p :class="winObj.Wins > winObj.VsWins ? '' : 'VsWins'">
          {{ winObj.VsWins }}
        </p>
      </div>
      <section data-v-21db9f26="" class="right">
        <div class="kkx">
          <img
            src="https://img.gc.wstservices.co.uk/fit-in/250x250/5efe8bf0-9c49-11ee-85b0-f963d1a98b8f.png"
          />
        </div>
        <div></div>
      </section>
    </div>
    <div class="wrapper">
      <div class="biaoti">
        <p>得分</p>
        <p>局数</p>
        <p>得分</p>
      </div>
      <template v-for="(item, index) in datalist" :key="index">
        <div class="data">
          <div>
            <p :class="item.res > 0 ? 'dataleft' : ''">
              {{ item.Points }}
            </p>
          </div>
          <div>
            <p>{{ index + 1 }}</p>
          </div>
          <div>
            <p :class="item.res > 0 ? '' : 'dataright'">{{ item.VsPoints }}</p>
          </div>
        </div>
      </template>
    </div>
  </section>
  <!-- <div v-for="(item, index) in imglist" :key="index">
    <img style="width: 100px; height: 100px" :src="item.src" alt="" />
  </div> -->
  <!-- <div
    class="grid justify-center grid-cols-5 pb-4 text-xs font-bold text-center border-b text-clear border-subtle"
  >
    <p>50+</p>
    <p>得分</p>
    <p>局数</p>
    <p>得分</p>
    <p>50+</p>
  </div> -->
  <div
    class="scores-wrapper flex items-center rounded-lg lg:px-6 surface/surface-elevation-low opacity-1"
  >
    <p class="text-xs font-bold text-white font-secondary lg:text-3xl">8</p>
    <p
      class="mx-6 font-normal font-secondary text-4xs lg:text-2xs text-text/subtle-dark"
    >
      -
    </p>
    <p class="text-xs font-bold text-white font-secondary lg:text-3xl">10</p>
  </div>
</template>
<script setup>
import { nextTick } from "vue";
import { ref } from "vue";
import { list, saiguo, listimg } from "./data";
const count = ref(0);
const str = ref("jkk");
const datalist = ref(list);
const winObj = ref(saiguo);
const imglist = ref(listimg);
const obj = ref({
  nested: { count: 0 },
  arr: ["foo", "bar"],
  aaa: 5,
});
function mutateDeeply() {
  // 以下都会按照期望工作
  obj.value.nested.count++;
  obj.value.arr.push("baz");
  obj.value.aaa = 6;
  str.value = "kklt";
}
function changeObj() {
  obj.value = {
    ...obj.value,
    kkx: "已变身",
  };
}

async function increment() {
  count.value++;
  await nextTick();
  console.log("dom已经更新", count.value);
  //现在 DOM 已经更新了
}
</script>
<style scoped lang="scss">
@media (min-width: 2024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
.basebox {
  // padding: 0 -10px 20px;
  min-height: 1000px;
  box-sizing: border-box;
}
section {
  background-color: rgb(28 28 28);
  .justify-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px 10px 20px;
    .saiguo {
      display: flex;
      p {
        font-weight: 600;
        font-size: 32px;
        color: #fff;
        margin: 0 2.5px;
      }
      .Wins {
        color: rgb(255 210 55);
      }
      .VsWins {
        color: rgb(255 210 55);
      }
    }
  }
  .left {
    .kkx::after {
      content: "";
      position: absolute;
      width: 55px;
      height: 33px;
      right: -45px;
      bottom: -5px;
      transform: skew(-45deg);
      --tw-bg-opacity: 1;
      background-color: rgb(251 250 238 / var(--tw-bg-opacity));
      height: 16px !important;
      bottom: -1px !important;
      right: -47px !important;
      border-left-width: 1px;
      border-left-style: solid;
      --tw-border-opacity: 1;
      border-color: rgb(133 133 133 / var(--tw-border-opacity));
      --tw-bg-opacity: 1;
      background-color: rgb(28 28 28 / var(--tw-bg-opacity));
    }
    .kkx {
      img {
        width: 110px;
        height: 110px;
      }
      tab-size: 4;
      -webkit-text-size-adjust: 100%;
      -webkit-font-smoothing: antialiased;
      --tw-text-opacity: 1;
      --tw-bg-opacity: 1;
      font-family: inherit;
      font-feature-settings: inherit;
      font-variation-settings: inherit;
      font-size: 100%;
      font-weight: inherit;
      line-height: inherit;
      color: inherit;
      text-transform: none;
      cursor: pointer;
      text-align: left;
      border: 0 solid #e5e7eb;
      --tw-border-spacing-x: 0;
      --tw-border-spacing-y: 0;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-rotate: 0;
      --tw-skew-x: 0;
      --tw-skew-y: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-pan-x: ;
      --tw-pan-y: ;
      --tw-pinch-zoom: ;
      --tw-scroll-snap-strictness: proximity;
      --tw-gradient-from-position: ;
      --tw-gradient-via-position: ;
      --tw-gradient-to-position: ;
      --tw-ordinal: ;
      --tw-slashed-zero: ;
      --tw-numeric-figure: ;
      --tw-numeric-spacing: ;
      --tw-numeric-fraction: ;
      --tw-ring-inset: ;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-color: rgba(59, 130, 246, 0.5);
      --tw-ring-offset-shadow: 0 0 transparent;
      --tw-ring-shadow: 0 0 transparent;
      --tw-shadow: 0 0 transparent;
      --tw-shadow-colored: 0 0 transparent;
      --tw-blur: ;
      --tw-brightness: ;
      --tw-contrast: ;
      --tw-grayscale: ;
      --tw-hue-rotate: ;
      --tw-invert: ;
      --tw-saturate: ;
      --tw-sepia: ;
      --tw-drop-shadow: ;
      --tw-backdrop-blur: ;
      --tw-backdrop-brightness: ;
      --tw-backdrop-contrast: ;
      --tw-backdrop-grayscale: ;
      --tw-backdrop-hue-rotate: ;
      --tw-backdrop-invert: ;
      --tw-backdrop-opacity: ;
      --tw-backdrop-saturate: ;
      --tw-backdrop-sepia: ;
      box-sizing: border-box;
      margin: 0;
      display: flex;
      height: 86px;
      width: 128px;
      align-items: flex-end;
      justify-content: center;
      border-radius: 1rem;
      border-width: 0.33px;
      --tw-border-opacity: 1;
      border-color: rgb(133 133 133 / var(--tw-border-opacity));
      transition-duration: 0.3s;
      position: relative;
    }
  }
  .right {
    .kkx::after {
      content: "";
      position: absolute;
      width: 55px;
      height: 33px;
      right: -45px;
      bottom: -5px;
      transform: skew(-45deg);
      --tw-bg-opacity: 1;
      background-color: rgb(251 250 238 / var(--tw-bg-opacity));
      height: 16px !important;
      bottom: -1px !important;
      right: -47px !important;
      border-left-width: 1px;
      border-left-style: solid;
      --tw-border-opacity: 1;
      border-color: rgb(133 133 133 / var(--tw-border-opacity));
      --tw-bg-opacity: 1;
      background-color: rgb(28 28 28 / var(--tw-bg-opacity));
    }
    .kkx {
      img {
        width: 110px;
        height: 110px;
      }
      tab-size: 4;
      -webkit-text-size-adjust: 100%;
      -webkit-font-smoothing: antialiased;
      --tw-text-opacity: 1;
      --tw-bg-opacity: 1;
      font-family: inherit;
      font-feature-settings: inherit;
      font-variation-settings: inherit;
      font-size: 100%;
      font-weight: inherit;
      line-height: inherit;
      color: inherit;
      text-transform: none;
      cursor: pointer;
      text-align: left;
      border: 0 solid #e5e7eb;
      --tw-border-spacing-x: 0;
      --tw-border-spacing-y: 0;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-rotate: 0;
      --tw-skew-x: 0;
      --tw-skew-y: 0;
      --tw-scale-y: 1;
      --tw-pan-x: ;
      --tw-pan-y: ;
      --tw-pinch-zoom: ;
      --tw-scroll-snap-strictness: proximity;
      --tw-gradient-from-position: ;
      --tw-gradient-via-position: ;
      --tw-gradient-to-position: ;
      --tw-ordinal: ;
      --tw-slashed-zero: ;
      --tw-numeric-figure: ;
      --tw-numeric-spacing: ;
      --tw-numeric-fraction: ;
      --tw-ring-inset: ;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-color: rgba(59, 130, 246, 0.5);
      --tw-ring-offset-shadow: 0 0 transparent;
      --tw-ring-shadow: 0 0 transparent;
      --tw-shadow: 0 0 transparent;
      --tw-shadow-colored: 0 0 transparent;
      --tw-blur: ;
      --tw-brightness: ;
      --tw-contrast: ;
      --tw-grayscale: ;
      --tw-hue-rotate: ;
      --tw-invert: ;
      --tw-saturate: ;
      --tw-sepia: ;
      --tw-drop-shadow: ;
      --tw-backdrop-blur: ;
      --tw-backdrop-brightness: ;
      --tw-backdrop-contrast: ;
      --tw-backdrop-grayscale: ;
      --tw-backdrop-hue-rotate: ;
      --tw-backdrop-invert: ;
      --tw-backdrop-opacity: ;
      --tw-backdrop-saturate: ;
      --tw-backdrop-sepia: ;
      box-sizing: border-box;
      margin: 0;
      display: flex;
      height: 86px;
      width: 128px;
      transform: translate(var(--tw-translate-x), var(--tw-translate-y))
        rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
        scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
      --tw-scale-x: -1;
      align-items: flex-end;
      justify-content: center;
      border-radius: 1rem;
      border-width: 0.33px;
      --tw-border-opacity: 1;
      border-color: rgb(133 133 133 / var(--tw-border-opacity));
      transition-duration: 0.3s;
      position: relative;
    }
  }
  .wrapper {
    padding: 0 20px;
    .biaoti {
      display: flex;
      justify-content: center;
      box-sizing: border-box;
      border-bottom: 0.33px solid rgb(133 133 133);
      padding-bottom: 10px;
      p {
        flex: 1;
        text-align: center;
        color: rgb(251, 250, 238);
        font-weight: 600;
      }
    }
  }
}
.data {
  display: flex;
  color: rgb(251, 250, 238);
  font-size: 16px;
  border-bottom: 0.33px solid rgb(133 133 133);
  padding: 5px 0;
  div {
    flex: 1;
    display: flex;
    justify-content: center;
    color: rgb(251, 250, 238);
    p {
      font-weight: 500;
      width: 35px;
      text-align: center;
      height: 22px;
      line-height: 22px;
    }
    .dataleft {
      background-color: rgb(255 210 55);
      border-radius: 3px;
      color: #000;
    }
    .dataright {
      background-color: rgb(255 210 55);
      border-radius: 3px;
      color: #000;
    }
  }
}
</style>
